<template>
    <div class="header">
        <div class="logo">Vue3 前端开发规范</div>
        <a-input v-model:value="SelectValue" class="SearchInput" readonly @focus="Status = true" @blur="Status = false">
            <template #suffix>
                <down-outlined style="color: #434343" />
            </template>
        </a-input>
        <transition name="fade-top">
            <div class="Menu" v-if="Status">
                <div v-for="item in list">
                    <div class="ItemTag">{{ item.label }}</div>
                    <div v-for="child in item.options" @click="Select(child)"
                        :class="{ active: SelectValue == child.label }" class="ItemValue">
                        {{ child.label }}</div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import router from '@/router';
import { useRoute } from 'vue-router';
import { DownOutlined } from '@ant-design/icons-vue'


const Status = ref(false);
const SelectValue = ref('');
const route = useRoute();


var list = ref([]);
var _path = router.getRoutes();


var TagMapping = {};
var ValueMapping = {};
var LabelMapping = {};
for (let i = 0; i < _path.length; i++) {
    const element = _path[i];
    if (element.meta && element.meta.name) {
        if (!TagMapping[element.meta.tags]) {
            TagMapping[element.meta.tags] = [];
        };
        var data = {
            label: element.meta.name,
            value: element.path
        };
        TagMapping[element.meta.tags].push(data);
        ValueMapping[data.value] = data;
        LabelMapping[data.label] = data;
    };
};

for (const key in TagMapping) {
    const element = TagMapping[key];
    list.value.push({
        label: key,
        options: element,
    });
}
watch(() => route.path, (val) => {
    if (ValueMapping[val]) {
        SelectValue.value = ValueMapping[val].label;
    };
})

watch(SelectValue, (val) => {
    if (LabelMapping[val]) {
        router.push(LabelMapping[val].value);
    };
})

const Select = (item) => {
    SelectValue.value = item.label;
}


</script>
<style lang="less" scoped>
.header {
    display: flex;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid #444;
}

.SearchInput {
    cursor: pointer !important;
    width: 300px;

    :deep(.ant-input) {
        cursor: pointer !important;
    }
}

.logo {
    font-size: 22px;
    margin-right: 20px;
    width: 200px;
}

.Menu {
    position: absolute;
    left: 220px;
    top: 40px;
    border: 1px solid #434343;
    // width: 600px;
    border-radius: 3px;
    padding: 5px 10px;
    background-color: #1f1f1f;
    z-index: 100;
    height: 500px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    .ItemTag {
        opacity: 0.7;
        width: 280px;
    }

    .ItemValue {
        width: 280px;
        padding: 5px 0 5px 20px;
        cursor: pointer;

        &:hover {
            background-color: #ffffff14;
        }

        &.active {
            font-weight: bold;
            background-color: #111b26;
        }
    }
}

.fade {

    &-enter-active,
    &-leave-active {
        transition: opacity 0.3s ease;
    }

    &-enter-from,
    &-leave-to {
        opacity: 0;
    }

    &-top {

        &-enter-active,
        &-leave-active {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        &-enter-from,
        &-leave-to {
            transform: translateY(10px);
            opacity: 0;
        }
    }
}
</style>